<template>
  <dl class="list">
    <dd v-for="(item, index) in list" :key="index">
      <div class="header">
        <div class="logo">
          <template v-if="item.subjectLog && item.subjectLog !== '-1'">
            <i class="icon iconfont2" :class="item.subjectLog"></i>
            <!-- <img :src="`assets/img/dissertation/${item.subjectLog}.png`" alt="" ondragstart="return false"> -->
          </template>
          <template v-else>
            <img
              src="../../../../assets/img/subscribe/default-01.png"
              alt=""
              ondragstart="return false"
            />
          </template>
        </div>
        <h4>
          <span @click="toDetail(item)">{{ item.subjectName }}</span>
        </h4>
        <p class="tools">
          <span
            @click="handleEdit(item, index)"
            class="icon iconfont2 iconbianji"
          ></span>
          <span
            @click="handleDelete(item)"
            class="icon iconfont2 iconhuishouzhan"
          ></span>
        </p>
      </div>
      <ul class="info">
        <!-- <li><i class="icon icon1"></i><p><span>项目数量</span>{{item.child.length}}</p></li> -->
        <li>
          <i class="icon icon3"></i>
          <p><span>专利数量</span>{{ item.patentTotal || 0 }}</p>
        </li>
        <li>
          <i class="icon icon2"></i>
          <p><span>创建时间</span>{{ item.insertDateStr }}</p>
        </li>
        <li :title="item.subjectDescribe">
          <i class="icon icon1"></i>
          <p><span>描述</span>{{ item.subjectDescribe || "无" }}</p>
        </li>
      </ul>
    </dd>
  </dl>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    init() {
      let list = [
        {
          id: 16,
          subjectName: "氨能源技术",
          subjectDescribe: "",
          // subjectLog: "iconfeijilvhang",
          subjectParentId: "0",
          sq: null,
          userId: "liguojian",
          insertDate: "2021-03-29T05:34:25.000+0000",
          updateDate: null,
          sort: null,
          patentTotal: 583,
          child: [],
        },
        {
          id: 16,
          subjectName: "石墨烯技术",
          subjectDescribe: "",
          // subjectLog: "iconfeijilvhang",
          subjectParentId: "0",
          sq: null,
          userId: "liguojian",
          insertDate: "2021-03-29T05:34:25.000+0000",
          updateDate: null,
          sort: null,
          patentTotal: 4599,
          child: [],
        },
        {
          id: 16,
          subjectName: "风力发电技术",
          subjectDescribe: "",
          // subjectLog: "iconfeijilvhang",
          subjectParentId: "0",
          sq: null,
          userId: "liguojian",
          insertDate: "2021-03-29T05:34:25.000+0000",
          updateDate: null,
          sort: null,
          patentTotal: 14561,
          child: [],
        },
        {
          id: 16,
          subjectName: "固态锂电池技术",
          subjectDescribe: "",
          // subjectLog: "iconfeijilvhang",
          subjectParentId: "0",
          sq: null,
          userId: "liguojian",
          insertDate: "2021-03-29T05:34:25.000+0000",
          updateDate: null,
          sort: null,
          patentTotal: 234,
          child: [],
        },
      ];
      list.forEach(v => {
        v.insertDateStr = moment(v.insertDate).format('YYYY-MM-DD')
      })
      this.list = list
    },
    toDetail(item) {

    }
  },
  beforeMount() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  margin-top: 20px;
  text-align: left;
  dd {
    width: calc(50% - 10px);
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-bottom: 20px;
    font-size: 12px;
    background-color: #fff;
    &:nth-of-type(2n-1) {
      margin-right: 10px;
    }
    &:nth-of-type(2n) {
      margin-left: 10px;
    }
    .header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
      padding: 0 10px;
      border-bottom: 1px solid #f0f1f3;
      background-color: #f9fbfd;
      .logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid #cddce2;
        box-sizing: border-box;
        background-color: #fff;
        .icon {
          display: inline-block;
          height: 100%;
          line-height: 43px;
          font-size: 26px;
        }
        img {
          width: 20px;
        }
      }
      h4 {
        position: relative;
        flex: 1;
        line-height: 40px;
        padding: 0 20px;
        font-size: 14px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span {
          display: inline-block;
          cursor: pointer;
        }
      }
      .tools {
        width: 80px;
        text-align: right;
        span {
          display: inline-block;
          margin-left: 10px;
          font-size: 18px;
          color: #cddce2;
          vertical-align: middle;
          cursor: pointer;
          &.iconhuishouzhan {
            font-size: 20px;
          }
          &:hover {
            color: #4f63c8;
          }
        }
      }
    }
    .info {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding: 0 20px;
      height: 60px;
      li {
        flex: 1;
        display: flex;
        align-items: center;
        min-width: 0;
        line-height: 40px;
        padding-right: 20px;
        &:last-of-type {
          padding-right: 0;
        }
        .icon {
          width: 40px;
          height: 40px;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: auto 18px;
        }
        p {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          span {
            width: 50px;
            margin-right: 8px;
          }
        }
      }
    }
  }
}
.icon1 {
  background-image: url(../../../../assets/img/subscribe/icon-01.png);
}
.icon2 {
  background-image: url(../../../../assets/img/subscribe/icon-02.png);
}
.icon3 {
  background-image: url(../../../../assets/img/subscribe/icon-03.png);
}
</style>